<template>
	<view class="uni-header">
		<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
	</view>

	<view class="uni-container">
		<uni-forms label-align="center" class="uni-forms" ref="form" :modelValue="formData" validateTrigger="bind"
			:rules="rules">
			<uni-forms-item name="nick" label="昵称" required>
				<uni-easyinput placeholder="请输入昵称" v-model="formData.nick" trim="both" :clearable="false" />
			</uni-forms-item>
			<uni-forms-item name="username" label="登录账号" required>
				<uni-easyinput placeholder="请输入登录账号" v-model="formData.username" trim="both" :clearable="false" />
			</uni-forms-item>
			<uni-forms-item name="password" label="登录密码" required>
				<uni-easyinput type="password" placeholder="请输入登录密码" v-model="formData.password" trim="both"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item name="passwordAgain" label="确认密码" required>
				<uni-easyinput type="password" placeholder="请输入登录密码" v-model="formData.passwordAgain" trim="both"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item name="email" label="联系邮箱">
				<uni-easyinput placeholder="请输入联系邮箱" v-model="formData.email" trim="both" :clearable="false" />
			</uni-forms-item>
			<uni-forms-item name="mobile" label="联系手机号">
				<uni-easyinput placeholder="请输入联系手机号" v-model="formData.mobile" trim="both" :clearable="false" />
			</uni-forms-item>
			<uni-forms-item class="flex-center-x" name="roleList" label="角色" required>
				<uni-data-checkbox multiple v-model="formData.roleList" :localdata="roleList"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item class="flex-center-x" name="status" label="状态" required>
				<uni-data-checkbox v-model="formData.status" :localdata="statusList" />
			</uni-forms-item>
			<uni-forms-item class="flex-center-x" name="homePage" label="默认首页" required>
				<uni-combox :candidates="pages" placeholder="请严格按照参考格式填写" v-model="formData.homePage"></uni-combox>
				<view class="uni-form-item-tips">
					<view>菜单格式：页面地址，例如：/pages/unify/user/list，<text style="color:red;">请留意大小写</text></view>
				</view>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;"
					@click="submitForm">{{$t('common.button.submit')}}</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>

	<fix-window />

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import md5 from 'js-md5'
	import {
		pages
	} from "@/pages.json"
	export default {
		data() {
			return {
				pages: [],
				formData: {},
				rules: {
					nick: {
						rules: [{
								required: true,
								errorMessage: '请输入昵称',
							},
							{
								minLength: 1,
								maxLength: 15,
								errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账号',
							},
							{
								minLength: 7,
								maxLength: 15,
								errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
								errorMessage: '必需英文开头，仅包含英文和数字',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入账号密码',
							},
							{
								minLength: 7,
								maxLength: 20,
								errorMessage: '账号密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					passwordAgain: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},
							{
								minLength: 7,
								maxLength: 20,
								errorMessage: '确认密码长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value != data.password) {
										callback('密码不一致')
									}
									return true
								}
							}
						]
					},
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					},
					mobile: {
						rules: [{
							pattern: /^1\d{10}$/,
							errorMessage: '请输入正确的手机号',
						}]
					},
					roleList: {
						rules: [{
							required: true,
							errorMessage: '请选择角色',
						}]
					}
				}
			}
		},
		onLoad(params) {
			this.pages = pages.map(item => "/" + item.path);

			if (params.id) {
				this.rules.password.rules.shift();
				this.rules.passwordAgain.rules.shift();
			}

			this.buildPage(params)
		},
		watch:{
			formData:{
				handler(newValue){
					if(newValue.password){
						if(this.rules.passwordAgain.rules.length < 3){
							this.rules.passwordAgain.rules.unshift({
									required: true,
									errorMessage: '请输入确认密码',
							});
						}
					}else{
						if(this.rules.passwordAgain.rules.length > 2){
							this.rules.passwordAgain.rules.shift();
						}
					}
				},
				deep:true,
			}
		},
		methods: {
			...mapActions({
				getUserForm: "user/form",
				saveUser: "user/save",
			}),
			async buildPage(params = {}) {
				uni.showLoading({
					mask: true,
				})

				let data = await this.getUserForm(params);

				this.statusList = [];
				Object.keys(data.status).forEach(key => {
					this.statusList.push({
						text: data.status[key],
						value: parseInt(key)
					})
				})
				
				this.roleList = [];
				Object.keys(data.roleIds).forEach(key => {
					this.roleList.push({
						text: data.roleIds[key],
						value: key
					})
				})
				
			


				this.formData = data.entity;

				uni.hideLoading()
			},
			submitForm() {
				uni.showLoading({
					mask: true
				})

				this.$refs.form.validate().then(data => {
					data.password = md5(data.password)
					data.passwordAgain = data.password;

					data.id = this.formData.id || 0;
					this.saveUser(data).then(res => {
						uni.showModal({
							title: "提示",
							content: "操作成功",
							confirmText: "继续添加",
							cancelText: "返回",
							success: (e) => {
								if (e.cancel) {
									this.back()
								} else {
									this.buildPage()
								}
							}
						})
					}).finally(_ => {
						uni.hideLoading()
					})
				}).catch(() => {
					uni.hideLoading()
				})
			},
		}
	}
</script>